<template>
  <div class="mx-container">
    <div class="margin75">
      <div class="sup-wrap">
        <h5 class="mx-title">{{$t('zz.other.support.serve.title')}}</h5>
        <ul class="sup-type">
          <li>
            <img :src="require('@/assets/img/support/list1.png')" alt="" />
            <div>{{$t('zz.other.support.serve.1')}}</div>
          </li>
          <li>
            <img :src="require('@/assets/img/support/list2.png')" alt="" />
            <div>{{$t('zz.other.support.serve.2')}}</div>
          </li>
          <li>
            <img :src="require('@/assets/img/support/list3.png')" alt="" />
            <div>{{$t('zz.other.support.serve.3')}}</div>
          </li>
          <li>
            <img :src="require('@/assets/img/support/list4.png')" alt="" />
            <div>{{$t('zz.other.support.serve.4')}}</div>
          </li>
        </ul>
      </div>

      <div class="sup-wrap">
        <h5 class="mx-title">
          {{$t('zz.other.support.content.title')}} <i class="iconfont icon-check" style="color: "></i>
        </h5>

        <div class="sup-vip-table-wrap">
          <table class="sup-vip-table sup-table">
            <tr>
              <td colspan="3">
                <div style="width: 420px">
                  <img
                    :src="
                      require('@/assets/img/support/sup-content-vip-left.png')
                    "
                    alt=""
                  />
                </div>
              </td>
              <td>
                <div class="heard-vip-item">
                  <img
                    :src="$t('zz.img.sup_content_1')"
                    alt=""
                  />
                  <div class="item-content">
                    <p>{{$t('zz.other.support.content.1.des')}}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="heard-vip-item">
                  <img
                    :src="$t('zz.img.sup_content_2')"
                    alt=""
                  />
                  <div class="item-content">
                    <p>{{$t('zz.other.support.content.2.des')}}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="heard-vip-item">
                  <img
                    :src="$t('zz.img.sup_content_3')"
                    alt=""
                  />
                  <div class="item-content">
                    <p>{{$t('zz.other.support.content.3.des')}}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="heard-vip-item">
                  <img
                    :src="$t('zz.img.sup_content_4')"
                    alt=""
                  />
                  <div class="item-content">
                    <p>{{$t('zz.other.support.content.4.des')}}</p>
                  </div>
                </div>
              </td>
              <td>
                <div class="heard-vip-item">
                  <img
                    :src="$t('zz.img.sup_content_5')"
                    alt=""
                  />
                  <div class="item-content">
                    <p>{{$t('zz.other.support.content.5.des')}}</p>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td rowspan="8">{{$t('zz.other.support.content.oamtm')}}</td>
              <td rowspan="2">{{$t('zz.other.support.content.mode')}}</td>
              <td>{{$t('zz.other.support.content.work')}}</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.wx')}}</td>
              <td>9:00-24:00</td>
              <td>24×7</td>
              <td>24×7</td>
              <td>24×7</td>
              <td>24×7</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.mode')}}</td>
              <td>{{$t('zz.other.support.content.mode')}}</td>
              <td>{{$t('zz.other.support.content.dispatch')}}</td>
              <td>{{$t('zz.other.support.content.exclusive')}}</td>
              <td>{{$t('zz.other.support.content.exclusive')}}</td>
              <td>{{$t('zz.other.support.content.exclusive')}}</td>
              <td>{{$t('zz.other.support.content.exclusive')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.staffing')}}</td>
              <td>{{$t('zz.other.support.content.server')}}</td>
              <td>{{$t('zz.other.support.content.primary')}}</td>
              <td>{{$t('zz.other.support.content.middle')}}</td>
              <td>{{$t('zz.other.support.content.senior')}}</td>
              <td>{{$t('zz.other.support.content.operation')}}</td>
              <td>{{$t('zz.other.support.content.counselor')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.treatment')}}</td>
              <td>{{$t('zz.other.support.content.zzproduct')}}</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.demand')}}</td>
              <td>{{$t('zz.other.support.content.bzpz')}}</td>
              <td>{{$t('zz.other.support.content.autoCon')}}</td>
              <td>{{$t('zz.other.support.content.autoCon')}}</td>
              <td>{{$t('zz.other.support.content.autoCon')}}/{{$t('zz.other.support.content.zzconfiguration')}}</td>
              <td>{{$t('zz.other.support.content.autoCon')}}/{{$t('zz.other.support.content.zzconfiguration')}}</td>
              <td>{{$t('zz.other.support.content.autoCon')}}/{{$t('zz.other.support.content.zzconfiguration')}}</td>
            </tr>
            <tr>
              <td rowspan="2">{{$t('zz.other.support.content.handling')}}</td>
              <td>{{$t('zz.other.support.content.ywwt')}}</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.fcpwt')}}</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td rowspan="4">{{$t('zz.other.support.content.ssm')}}</td>
              <td>{{$t('zz.other.support.content.response')}}</td>
              <td style="width: 120px">{{$t('zz.other.support.content.aqsj')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td rowspan="2">{{$t('zz.other.support.content.Business')}}</td>
              <td>{{$t('zz.other.support.content.loudong')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>{{$t('zz.other.support.content.quarterly')}}</td>
              <td>{{$t('zz.other.support.content.quarterly')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.clyhjy')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>{{$t('zz.other.support.content.quarterly')}}</td>
              <td>{{$t('zz.other.support.content.quarterly')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.Safety')}}</td>
              <td>{{$t('zz.other.support.content.ywaq')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td rowspan="4">{{$t('zz.other.support.content.asp')}}</td>
              <td rowspan="3">{{$t('zz.other.support.content.Best')}}</td>
              <td>{{$t('zz.other.support.content.ywtx')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.tgyh')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.yhfa')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.nrff')}}</td>
              <td>{{$t('zz.other.support.content.nrff')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td rowspan="7">{{$t('zz.other.support.content.pmc')}}</td>
              <td>{{$t('zz.other.support.content.Service')}}</td>
              <td>{{$t('zz.other.support.content.dfws')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.Project')}}</td>
              <td>{{$t('zz.other.support.content.xmgl')}}</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td rowspan="2">{{$t('zz.other.support.expert.dzbg')}}</td>
              <!-- 服务运行报告 -->
              <td>{{$t('zz.other.support.content.fwyxbg')}}</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.csdb')}}</td>
              <td>-</td>
              <td>-</td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
              <td><i class="iconfont icon-check" /></td>
            </tr>
            <tr>
              <td rowspan="3">{{$t('zz.other.support.content.Re-protected')}}</td>
              <td>{{$t('zz.other.support.content.ywph')}}</td>
              <td>{{$t('zz.other.support.content.times')}}</td>
              <td>{{$t('zz.other.support.content.times')}}</td>
              <td>2{{$t('zz.timesPrice')}} {{$t('zz.other.support.content.overTimes')}}</td>
              <td>4{{$t('zz.timesPrice')}} {{$t('zz.other.support.content.overTimes')}}</td>
              <td>6{{$t('zz.timesPrice')}} {{$t('zz.other.support.content.overTimes')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.yczb')}}</td>
              <td>{{$t('zz.other.support.content.times')}}</td>
              <td>{{$t('zz.other.support.content.times')}}</td>
              <td>1{{$t('zz.timesPrice')}} {{$t('zz.other.support.content.overTimes')}}</td>
              <td>2{{$t('zz.timesPrice')}} {{$t('zz.other.support.content.overTimes')}}</td>
              <td>4{{$t('zz.timesPrice')}} {{$t('zz.other.support.content.overTimes')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.content.xczb')}}</td>
              <td>{{$t('zz.other.support.content.times')}}</td>
              <td>{{$t('zz.other.support.content.times')}}</td>
              <td>{{$t('zz.other.support.content.times')}}</td>
              <td>{{$t('zz.other.support.content.times')}}</td>
              <td>1{{$t('zz.timesPrice')}} {{$t('zz.other.support.content.overTimes')}}</td>
            </tr>
            <tr>
              <td colspan="3">{{$t('zz.other.support.content.Selling')}}</td>
              <td>xxx{{$t('zz.price')}}</td>
              <td>xxx{{$t('zz.price')}}</td>
              <td>xxx{{$t('zz.price')}}</td>
              <td>xxx{{$t('zz.price')}}</td>
              <td>xxx{{$t('zz.price')}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="sup-wrap">
        <h5 class="mx-title">{{$t('zz.other.support.expert.title')}}</h5>
        <div class="sup-vip-table-wrap">
          <table class="sup-table sup-specialist">
            <tr>
              <th width="170">{{$t('zz.other.support.expert.cos')}}</th>
              <th width="175">{{$t('zz.other.support.expert.SA')}}</th>
              <th width="800">{{$t('zz.other.support.expert.details')}}</th>
              <th width="175">{{$t('zz.other.support.content.Selling')}}</th>
            </tr>
            <tr>
              <td rowspan="3">{{$t('zz.other.support.expert.zbhh')}}</td>
              <td>{{$t('zz.other.support.expert.ywph')}}</td>
              <td>{{$t('zz.other.support.expert.ywph.des')}}</td>
              <td>xxx{{$t('zz.timesPrice')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.expert.yczb')}}</td>
              <td>{{$t('zz.other.support.expert.yczb.des')}}</td>
              <td>xxx{{$t('zz.timesPrice')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.expert.zczb')}}</td>
              <td>{{$t('zz.other.support.expert.zczb.des')}}</td>
              <td>xxx{{$t('zz.pricePeopleDay')}}</td>
            </tr>
            <tr>
              <td rowspan="2">{{$t('zz.other.support.expert.dzbg')}}</td>
              <td>{{$t('zz.other.support.expert.bzbbg')}}</td>
              <td>{{$t('zz.other.support.expert.bzbbg.des')}}</td>
              <td>xxx{{$t('zz.onePrice')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.expert.jjbbg')}}</td>
              <td>{{$t('zz.other.support.expert.jjbbg.des')}}</td>
              <td>xxx{{$t('zz.onePrice')}}</td>
            </tr>
            <tr>
              <td>{{$t('zz.other.support.expert.exclusiveServe')}}</td>
              <td>{{$t('zz.other.support.expert.qzzc')}}</td>
              <td>{{$t('zz.other.support.expert.qzzc.des')}}</td>
              <td>xxx{{$t('zz.monthPrice')}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="sup-wrap">
        <h5 class="mx-title">{{$t('zz.other.support.advantage.title')}}</h5>
        <ul class="sup-advantage">
          <li>
            <img :src="require('@/assets/img/support/24h.png')" alt="" />
            <div>{{$t('zz.other.support.advantage.1')}}</div>
          </li>
          <li>
            <img :src="require('@/assets/img/support/20y.png')" alt="" />
            <div>{{$t('zz.other.support.advantage.2')}}</div>
          </li>
          <li>
            <img :src="require('@/assets/img/support/team.png')" alt="" />
            <div>{{$t('zz.other.support.advantage.3')}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},
  props: {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
@import "@/style/variables.scss";

//  370*225
.margin75{
  margin: 0 -75px;
  background-color: #fff;
}
.sup-wrap {
  padding: 50px 75px;
  img {
    max-width: 100%;
  }
  .sup-table {
    width: 100%;
    border-top: 1px solid #f5f5f6;
    border-left: 1px solid #f5f5f6;
    tr {
      td, th {
        border-right: 1px solid #f5f5f6;
        border-bottom: 1px solid #f5f5f6;
        text-align: center;
        font-size: 12px;
        line-height: 18px;
        padding: 6px 2px;
        white-space: pre-wrap;
      }
    }
  }
  .sup-vip-table {
    .icon-check {
      color: #26cb72;
      font-size: 14px;
    }
    tr {
      td {
        border-right: 1px solid #f5f5f6;
        border-bottom: 1px solid #f5f5f6;
        text-align: center;
        font-size: 12px;
        line-height: 18px;
        padding: 6px 2px;
        .heard-vip-item {
          width: 154px;
          height: 254px;
          img {
            width: 100%;
          }
          .item-content {
            padding: 0 5px;
            p {
              font-size: 12px;
              color: $subColor;
              line-height: 130%;
            }
          }
        }
      }
      &:nth-child(odd) {
        td {
          &:last-child {
            background-color: #e6edfa;
          }
          &:nth-last-child(2) {
            background-color: #e7f1f7;
          }
          &:nth-last-child(3) {
            background-color: #eaf0f3;
          }
          &:nth-last-child(4) {
            background-color: #edf6ec;
          }
          &:nth-last-child(5) {
            background-color: #d8e5d7;
          }
          &:nth-last-child(6) {
            background-color: #ebf0fa;
          }
        }
      }
      &:first-child {
        td {
          background-color: #fff !important;
          padding: 0 !important;
        }
      }
    }
  }
  .sup-specialist{
    tr{
      th{
        background-color: #DFE4F6;
      }
      &:nth-child(odd) {
        td {
          &:last-child {
            background-color: #F8F9FD;
          }
          &:nth-last-child(2) {
            background-color: #F8F9FD;
          }
          &:nth-last-child(3) {
            background-color: #F8F9FD;
          }
        }
      }
      td{
        &:nth-last-child(2) {
          padding: 12px 25px ;
          text-align: left;
        }
      }
      
    }
    
  }
}
ul.sup-type {
  display: flex;
  padding: 20px 0px 40px;
  li {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    img {
      width: 60px;
      height: 60px;
    }
    div {
      text-align: center;
      margin-top: 20px;
      color: $subColor;
    }
  }
}
ul.sup-advantage {
  display: flex;
  justify-content: space-between;
  li {
    display: flex;
    align-items: center;
    img {
      width: 90px;
      height: 90px;
      border-radius: 45px;
    }
    div {
      margin-left: 30px;
      color: $subTitleColor;
      font-size: 14px;
    }
  }
}

@media screen and (max-width:768px) {
  .sup-wrap{
    padding: .5rem 0;
  }
  .margin75{
    margin: 0;
  }
  .sup-vip-table-wrap{
    width: 100%;
    overflow: auto;
    .sup-specialist{
      width: 700px;
    }
  }
  ul.sup-advantage{
    li{
      img{
        width: 50px;
        height: 50px;
      }
      div{
        margin-left: .2rem;
        font-size: .2rem;
      }
    }
  }
}

</style>